<template>
	<eui-page-frame topHeight="265">
		<template #top>
			<view class="content-img">
				<view class="navigation">
					<eui-nav-bar title="销售补录详情" color="#000000" />
				</view>
				<view>
					<eui-tab :tabStyle="tabstyle" :tabs="tabData" :spaceLeft="spaceLeft" :value="tabIndex"
						:showBadge="false" @change="tabChange"></eui-tab>
				</view>
			</view>
		</template>
		<eui-page-content>
			<view v-if="tabIndex===0">
				<eui-base-card>
					<eui-detail-show borderBottom="true" :items="Items" v-model="saleData"
						textAlign="right"></eui-detail-show>
				</eui-base-card>
				<eui-base-card>
					<view class="tipsFlex">
						<view class="tag-color"><text class="tag-text">异常</text></view>
						<text class="text-color">大于近30天日均销售5倍。</text>
					</view>
				</eui-base-card>

				<eui-base-card v-if="saleDetailData.length>0" v-for="(item,index) in saleDetailData" :key="index">
					<eui-detail-show borderBottom="true" :items="Items2" v-model="saleDetailData[index]"
						textAlign="right"></eui-detail-show>
				</eui-base-card>
				<view v-else>
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
					<view class="no-data-text">暂无数据</view>
				</view>
			</view>
			<view v-else>
				<eui-virtual-list style="margin-top:-20rpx" v-if="billDetails.length>0" :origList="billDetails" :options="billDetailoptions"
					:isBottom="false" type="list" @itemClick="openBillDetail" />
				<view v-else>
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
					<view class="no-data-text">暂无数据</view>
				</view>
			</view>

		</eui-page-content>
	</eui-page-frame>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useLoginStore } from '@/store/modules/useLoginStore';
	import useService from '@/hooks/useService';
	import dayjs from 'dayjs';
	const service = useService({ prefix: "apiApi" });
	const LoginStore = useLoginStore();
	const param = ref({ c_date: '', c_con_no: '', c_bname: '' })
	const tabData = ref(['品牌汇总', '单据列表']);
	const tabIndex = ref(0);
	const tabstyle = ref({ justifyContent: 'space-around' })
	const spaceLeft = ref(20);
	const saleData = ref({ c_bcode: '', c_value: 0 });
	const saleDetailData = ref([]);
	const Items = [
		{
			label: "品牌",
			prop: "c_bcode",
			type: "text",
			element: {

			},
		},
		{
			label: "当日总销售额",
			prop: "c_value",
			type: "text",
			element: {
				precision: 2,
			},
		},
	]
	const Items2 = [
		{
			label: "销售码",
			prop: "c_gds_code",
			type: "text",
			element: {

			},
		},
		{
			label: "销售金额",
			prop: "c_sale_value",
			type: "text",
			element: {
				precision: 2,
			},
		},
		{
			label: "销售笔数",
			prop: "c_count",
			type: "text",
			element: {
			},
		},
		{
			label: "销售数量",
			prop: "c_n_sale",
			type: "text",
			element: {
			},
		},
	]
	const billDetailoptions = ref([
		{ label: "销售总金额", name: "c_sale_value" },
		{ label: "销售总笔数", name: "c_count" },
		{ label: "制单人", name: "c_mk_userinfo" },
		{ label: "制单时间", name: "c_mk_dt" },
	])
	const billDetails = ref([])
	onLoad(async ({ c_date, c_con_no, c_bname }) => {
		param.value = {
			c_date: c_date,
			c_con_no: c_con_no,
			c_bname: c_bname
		}
		await GetSalesRecordByContractNo()
	})

	//获取每日补录数据
	const GetSalesRecordByContractNo = async () => {
		const req = {
			WhereList: [
				{ c_col: "c_date", c_oper: "等于", c_value: param.value.c_date, c_logic: "而且" },
				{ c_col: "c_con_no", c_oper: "等于", c_value: param.value.c_con_no, c_logic: "而且" },
			]
		}
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通销售补录单', 'GetMobileSalesRecordByContractNo', req);
		uni.hideLoading();
		if (res) {
			billDetails.value = res.billDetails.map(x => {
				return {
					...x,
					c_sale_value: x.c_sale_value?.toFixed(2),
					c_mk_dt: dayjs(x.c_mk_dt).format('YYYY-MM-DD HH:mm:ss'),
					c_date: dayjs(x.c_mk_dt).format('MM-DD'),
					c_mk_userinfo: '[' + x.c_mk_userno + ']' + (x.c_mk_username || ''),
				}
			});
			saleDetailData.value = res.brandData.map(x => {
				return {
					...x,
					c_sale_value: x.c_sale_value.toFixed(2),
					c_gds_code: '[' + x.c_gcode + ']' + (x.c_gname || ''),
				}
			});
			saleData.value = {
				c_bcode: '[' + param.value.c_con_no + ']' + '' + (param.value.c_bname || ''),
				c_value: res.c_sum_value
			}
		}
		// let request = {
		//     url: 'http://192.168.137.1:9000/rds-api/api/Enjoy/Service',
		//     data: {
		//         UniqueKey: "管易通销售补录单",
		//         ObjectData: req, //用于苹果审核特殊处理获取不到用户时默认按0006账号获取
		//         MethodName: "GetMobileSalesRecordByContractNo",
		//     },
		// }
		// service.request(request, (res) => {
		//     if (res && res.data) {
		//         console.log(JSON.stringify(res.data))
		//         const ObjectData = res.data.ObjectData;
		//         if (!res.data.HasException) {
		//             if (ObjectData) {
		// 				billDetails.value = ObjectData.billDetails.map(x=>{
		// 					return {
		// 						...x,
		// 						c_date:x.c_mk_dt.substring(5,10),
		// 						c_mk_userinfo:'【'+x.c_mk_userno+'】'+x.c_mk_username,
		// 					}
		// 				});
		// 				saleDetailData.value = ObjectData.brandData.map(x=>{
		// 					return {
		// 						...x,
		// 						c_gds_code:'【'+x.c_gcode+'】'+(x.c_gname??''),
		// 					}
		// 				});
		// 				saleData.value ={
		// 					c_bcode : '【'+param.value.c_con_no+'】'+' '+param.value.c_bname,
		// 					c_value:ObjectData.c_sum_value
		// 				} 
		//             }
		//         } else {
		//             service.enjoyShowToast(res.data.Exception.Message)
		//         }
		//     }
		// }, () => {
		//     console.log('失败')
		// });
	}
	const tabChange = (e) => {
		tabIndex.value = e;
		uni.pageScrollTo({ scrollTop: 0 })
	}
	const openBillDetail = (item) => {
		console.log('item', item)
		uni.navigateTo({
			url: `./billDetail?c_id=${item.item.c_id}`
		});
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #F2F2F2;
		padding: 0px !important
	}

	.content-img {
		background-color: #FFFFFF;
		background-size: 100% 420rpx;
		background-repeat: no-repeat;
		width: 100%;
	}

	.navigation {
		flex: 0 0 auto;
		margin-bottom: 5px;
	}

	.tag-color {
		background-color: rgba(255, 64, 0, 1);
		border-radius: 8px;
		padding: 1px 8px;
	}

	.tag-text {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 13px;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.tipsFlex {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 10px;
	}

	.text-color {
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 13px;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
		margin-left: 8px;
		margin-top: 1px;
	}

	.bt-button {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.image-min {
		width: 100%;
		height: 150rpx;
		opacity: 0.6;
	}
	::v-deep .list_cell{
		margin:0 !important;
	}
	.no-data-text{
		text-align: center;
		color: #cccccc;
		font-size:24rpx;
		margin-top:-20rpx;
	}
</style>